本篇博文只是记录了刚刚搭建许愿墙的脚手架和学习 React 的文档，记录下来方便自己能够温故知新，整个项目的最终
总结会在女生节结束后发布。
##项目骨架
本项目使用 react + react-router + es6
构建工具 gulp + webpack + babel
前端 UI 库：FrozenUI
###前端自适应方法
暂时使用了移动端自适应方法 flexible 方案，如果时间允许则使用 flex 布局。
flexible 方案
##注意事项
###CSS 编写
因为 react 使用组件化开发，但是 CSS 的痛点在于全局性，那么在 react 的组件式开发中需要使用 BEM 模式，或使用 container 类名来独特定义组件，但是在此项目中使用 CSS-Module 。
使用 CSS-Module 来配合 React 进行组件化开发，这里有人可能会问 React 不是提供了 CSS in JS 的方法即使用对象
来使用内联样式吗？问题在于对象方法无法表示伪类这样的 CSS 代码，使用起来 CSS 代码就没有复用性了，所以采用
CSS-Module。为什么不建议用 jsx 的 inine style ，因为这样是写不了伪元素的，建议使用 css-module 方法。
详细的关于 CSS-Module 的资料这里不再多说，详细请看 CSS-Module.
这里我提一个疑问，使用 React 组件化开发 .css 文件写在哪里进行引用管理呢？
在 webpack 中使用 css-loader 就可以了，css 原生不支持 CSS-Module，使用 webpack 就可以模块化了。
但是又有个疑问就是使用 css-loader 加载出来的 css 文件是动态地插入到 index.html 中的，那么不是消耗了大量的 http 请求吗？
这样的话那还不如自己引入 css 文件然后合并压缩，这样反而性能更好，这样想是错的，因为插入的是 style 标签，而不是 link 标签，并不会消耗 http 请求数量。
###首页加载
需要懒加载组件，因为许愿墙相对较大，并且我十分在乎初始化速度，react 的懒加载与 vue 的懒加载十分类似，
使用 require.ensure ，写进路由里面，需要的时候才进行加载。
并且根据我以往开发单页面项目的经验，在入口文件中的图片等资源的 CDN 加速也是很影响首页加载速度的，因此本次
项目开发使用七牛 CDN 加载静态资源。
React 小书–优化开发
懒加载入口文件
###组件编写
本次组件采用 jsx 语法，组件保存在 components 文件夹内，一个组件一个文件名，文件夹内存放 css 文件与 jsx 文件。
###使用 gulp-connect 而不是使用 webpack-dev-server
一般来说使用 gulp-connect 与 webpack-dev-server 都是合适的，但是对于此项目我希望更加自动化，将打包压缩好的代码自动上传到七牛 CDN 中，并且整个项目的流程更加清晰，webpack 当然也能完成项目构建的全部内容，但是就少了对项目整体的把控。
###希望拥有高效的编译
高效的编译有 3 个方法：
- 避免全局编译
- 使用 gulp-cached 与 gulp-remember 配合，我使用的是 gulp-changed 只获取改变过的文件再编译
jsx 怎么避免全局编译，使用 gulp-changed 无法配合 webpack 使用 - 在上线的时候才压缩优化
###怎样才能有效地提高 react 的编译速度
使用优化重合并，避免每次都编译打包一次 react 整个库和它的依赖。
优化重合并
###Zepto 的坑
因为 Zepto 自带的 click 事件是有点击穿透的 bug 存在的，所以应该使用 fastclick 插件来解决。
参考资料：
webpack + gulp 构建完整前端工作流
react-js开发环境
开发工具心得：如何 10 倍提高你的 Webpack 构建效率
（未完持续）